<template>
	<view>
		<view class="play-progress flex-box flex-valign">
			<view>{{playTimeStr}}</view>
			<view class="flex-item">
				<slider :value="progress" block-size="12" activeColor="#E93B3D" @changing="onSliding" @change="onSlideComplete"/>
			</view>
			<view>{{lengthStr}}</view>
		</view>
		<view class="tool-bar flex-box flex-valign">
			<view class="flex-item icon-left" @click="favourite">
				<i class="music-icon music-icon-heart"></i>
			</view>
			<view class="flex-box flex-valign">
				<span class="icon-center1">
					<i class="music-icon music-icon-backward"></i>
				</span>
				<span class="icon-center2" @click="togglePlay">
					<i :class="'music-icon music-icon-' + (playing ? 'stop-border' : 'play-border')"></i>
				</span>
				<span class="icon-center3">
					<i class="music-icon music-icon-forward"></i>
				</span>
			</view>
			<view class="flex-item icon-right">
				<i class="music-icon music-icon-menu"></i>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { secondsToString } from '../../utils/index.js'
	import circleProgress from '@/components/circle-progress/circle-progress.vue'
	export default {		
		data() {
			return {
				onSlide: false, // 是否正在拖动进度条
				tmpProgress: 0// 拖动过程中播放进度的临时变量，0~1
			}
		},
		computed: {
			playTimeStr() {
				let playSeconds = this.playTime();
				if(this.onSlide){// 拖动过程中从本地临时变量获取播放进度以做显示
					if(this.tmpProgress == 100){
						playSeconds = this.$store.state.music.length;
					}
					else{
						playSeconds = this.tmpProgress * this.$store.state.music.length / 100;
					}
				}
				return secondsToString(playSeconds);
			},
			lengthStr() {
				let length = this.$store.state.music.length;
				return secondsToString(length);
			},
			playing() {
				return this.$store.state.playing;
			},
			progress() {
				if(this.onSlide){
					return this.tmpProgress;
				}
				else{
					return this.$store.state.music.progress;
				}
			}
		},
		methods: {
			...mapGetters([
				'playTime'
			]),
			togglePlay() {
				this.MusicPlayer.togglePlay();
			},
			favourite() {
				uni.showToast({
					title: '当前只有心动模式',
					duration: 1600,
					icon: 'none',
					success: () => {
						setTimeout(() => {
							uni.hideToast();
						}, 1600)
					}
				})
			},
			onSliding(e) {
				this.onSlide = true;
				this.tmpProgress = e.detail.value;
			},
			onSlideComplete(e) {
				this.onSlide = false;
				this.MusicPlayer.changedProgress(e.detail.value);
			}
		},
		mounted() {
		}
	}
</script>

<style scoped>
	.play-progress{
		padding: 0 20rpx;
		font-size: 24rpx;
	}
	.tool-bar{
		padding: 0 0 20rpx;
	}
	.icon-left{
		text-align: right;
		font-size: 46rpx;
		padding-right: 46rpx;
	}
	.icon-right{
		text-align: left;
		font-size: 40rpx;
		padding-left: 46rpx;
	}
	.icon-center1, .icon-center2, .icon-center3{
		padding: 0 16rpx;
	}
	.icon-center1, .icon-center3{
		font-size: 56rpx;
	}
	.icon-center2{
		font-size: 66rpx;
	}
</style>
